<template>
  <modal title="测试弹窗" @register="registerModal">
    <div v-for="i in 30" :key="i">{{ i }}</div>
    <template #footer>
      <el-button class="mr-8px" @click="closeModal">取消</el-button>
      <el-dropdown split-button type="primary">
        保存
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>保存并提交</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </modal>
</template>

<script setup lang="ts">
import { modal, useModal } from '@/components/Modal/index.ts'
import { ElMessage } from 'element-plus'

const { openModal, registerModal, closeModal } = useModal((data: any) => {
  ElMessage({
    type: 'info',
    message: data
  })
})
defineExpose({ openModal })
</script>

<style scoped>

</style>